﻿<UserControl x:Class="Framework.UI.TestHarness.Views.FlyoutView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:interactivity="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
             xmlns:metro="http://schemas.codeplex.com/elysium"
             xmlns:params="http://schemas.codeplex.com/elysium/params"
             xmlns:extra="http://schemas.extra.com/ui"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>

        <DataTemplate x:Key="SettingsHeaderTemplate">
            <StackPanel Orientation="Horizontal">
                <extra:Icon Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type metro:ToggleCommandButton}}}"  
                            Margin="{Binding Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter='Right', RelativeSource={RelativeSource Self}, Path=(params:General.BoldPaddingValue), Mode=OneWay}"
                            Size="Medium"
                            Style="{StaticResource Settings1IconStyle}"/>
                <TextBlock Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type metro:ToggleCommandButton}}}"  
                           Style="{StaticResource HeaderTextStyle}" 
                           Text="Settings"/>
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="SettingsContentTemplate">
            <ItemsControl MinWidth="400">
                <interactivity:Interaction.Behaviors>
                    <extra:AnimatingItemsControlBehavior/>
                </interactivity:Interaction.Behaviors>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                        </Grid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <Label Content="Setting 1"
                       Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                       Target="{Binding ElementName=ToggleSwitch1}"/>
                <metro:ToggleSwitch x:Name="ToggleSwitch1" 
                                    Grid.Column="1"
                                    Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"/>

                <Label Grid.Row="1" 
                       Content="Setting 2"
                       Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                       Target="{Binding ElementName=ToggleSwitch2}"/>
                <metro:ToggleSwitch x:Name="ToggleSwitch2" 
                                    Grid.Column="1"
                                    Grid.Row="1" 
                                    Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"/>

                <Label Grid.Row="2" 
                       Content="Setting 3"
                       Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                       Target="{Binding ElementName=ToggleSwitch3}"/>
                <metro:ToggleSwitch x:Name="ToggleSwitch3" 
                                    Grid.Column="1"
                                    Grid.Row="2" 
                                    Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"/>

                <Label Grid.Row="3" 
                       Content="Setting 4"
                       Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                       Target="{Binding ElementName=ToggleSwitch4}"/>
                <metro:ToggleSwitch x:Name="ToggleSwitch4" 
                                    Grid.Column="1"
                                    Grid.Row="3" 
                                    Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"/>

                <Label Grid.Row="4" 
                       Content="Setting 5"
                       Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                       Target="{Binding ElementName=ToggleSwitch5}"/>
                <metro:ToggleSwitch x:Name="ToggleSwitch5" 
                                    Grid.Column="1"
                                    Grid.Row="4" 
                                    Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"/>

            </ItemsControl>
        </DataTemplate>
        
        <DataTemplate x:Key="ContrastSettingsHeaderTemplate">
            <StackPanel Orientation="Horizontal">
                <extra:Icon Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type metro:ToggleCommandButton}}}"
                            Margin="{Binding Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter='Right', RelativeSource={RelativeSource Self}, Path=(params:General.BoldPaddingValue), Mode=OneWay}"
                            Size="Medium"
                            Style="{StaticResource Settings1IconStyle}"/>
                <TextBlock Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type metro:ToggleCommandButton}}}"
                           Style="{StaticResource HeaderTextStyle}" 
                           Text="Settings"/>
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="ContrastSettingsContentTemplate">
            <ItemsControl MinWidth="400">
                <interactivity:Interaction.Behaviors>
                    <extra:AnimatingItemsControlBehavior/>
                </interactivity:Interaction.Behaviors>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                        </Grid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <Label Content="Setting 1"
                       Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Expander}}}"
                       Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                       Target="{Binding ElementName=ToggleSwitch1}"/>
                <metro:ToggleSwitch x:Name="ToggleSwitch1" 
                                    Grid.Column="1"
                                    BorderBrush="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Expander}}}"
                                    Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"/>

                <Label Grid.Row="1" 
                       Content="Setting 2"
                       Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Expander}}}"
                       Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                       Target="{Binding ElementName=ToggleSwitch2}"/>
                <metro:ToggleSwitch x:Name="ToggleSwitch2" 
                                    Grid.Column="1"
                                    Grid.Row="1" 
                                    BorderBrush="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Expander}}}"
                                    Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"/>

                <Label Grid.Row="2" 
                       Content="Setting 3"
                       Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Expander}}}"
                       Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                       Target="{Binding ElementName=ToggleSwitch3}"/>
                <metro:ToggleSwitch x:Name="ToggleSwitch3" 
                                    Grid.Column="1"
                                    Grid.Row="2" 
                                    BorderBrush="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Expander}}}"
                                    Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"/>

                <Label Grid.Row="3" 
                       Content="Setting 4"
                       Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Expander}}}"
                       Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                       Target="{Binding ElementName=ToggleSwitch4}"/>
                <metro:ToggleSwitch x:Name="ToggleSwitch4" 
                                    Grid.Column="1"
                                    Grid.Row="3" 
                                    BorderBrush="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Expander}}}"
                                    Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"/>

                <Label Grid.Row="4" 
                       Content="Setting 5"
                       Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Expander}}}"
                       Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                       Target="{Binding ElementName=ToggleSwitch5}"/>
                <metro:ToggleSwitch x:Name="ToggleSwitch5" 
                                    Grid.Column="1"
                                    Grid.Row="4" 
                                    BorderBrush="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Expander}}}"
                                    Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"/>

            </ItemsControl>
        </DataTemplate>
        
    </UserControl.Resources>
    <Grid x:Name="ParentGrid">

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <TextBlock Grid.ColumnSpan="2" 
                       Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                       Style="{StaticResource HeaderTextStyle}" 
                       Text="TODO Improvements"/>
            <TextBlock Grid.ColumnSpan="2" 
                       Grid.Row="1"
                       Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                       Style="{StaticResource NormalTextStyle}" 
                       Text="Currently, if you use the Flyout Expander with the Dark or Accent colour backgrounds, you have to set the foreground for every control inside the window to Bind to the Expander Foreground. If theming was extended so that a control can have a different theme to the rest of the application, then the Dark and Accent Flyout Expander could use the Dark theme and every control would have it's Foreground set appropriately."/>

            <TextBlock Grid.ColumnSpan="2" 
                       Grid.Row="2"
                       Margin="{Binding RelativeSource={RelativeSource Self}, Path=(params:General.BoldPadding), Mode=OneWay}"
                       Style="{StaticResource HeaderTextStyle}" 
                       Text="Flyout Expander"/>

            <Label Grid.Row="3" 
                   Content="Expand Direction"
                   HorizontalAlignment="Right"
                   Margin="{Binding Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter='Left, Top', RelativeSource={RelativeSource Self}, Path=(params:General.BoldPaddingValue), Mode=OneWay}"
                   Target="{Binding ElementName=ExpandDirectionComboBox}"/>
            <ComboBox x:Name="ExpandDirectionComboBox" 
                      Grid.Column="1"
                      Grid.Row="3" 
                      Margin="{Binding Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter='Left, Top, Right', RelativeSource={RelativeSource Self}, Path=(params:General.BoldPaddingValue), Mode=OneWay}"
                      SelectedIndex="0">
                <ExpandDirection>Left</ExpandDirection>
                <ExpandDirection>Down</ExpandDirection>
                <ExpandDirection>Right</ExpandDirection>
                <ExpandDirection>Up</ExpandDirection>
            </ComboBox>

            <Label Grid.Row="4" 
                   Content="Light Expanded"
                   HorizontalAlignment="Right"
                   Margin="{Binding Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter='Left, Top', RelativeSource={RelativeSource Self}, Path=(params:General.BoldPaddingValue), Mode=OneWay}"
                   Target="{Binding ElementName=LightExpandedCheckBox}"/>
            <CheckBox x:Name="LightExpandedCheckBox" 
                      Grid.Column="1"
                      Grid.Row="4" 
                      Margin="{Binding Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter='Left, Top, Right', RelativeSource={RelativeSource Self}, Path=(params:General.BoldPaddingValue), Mode=OneWay}"/>

            <Label Grid.Row="5" 
                   Content="Accent Expanded"
                   HorizontalAlignment="Right"
                   Margin="{Binding Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter='Left, Top', RelativeSource={RelativeSource Self}, Path=(params:General.BoldPaddingValue), Mode=OneWay}"
                   Target="{Binding ElementName=AccentExpandedCheckBox}"/>
            <CheckBox x:Name="AccentExpandedCheckBox" 
                      Grid.Column="1"
                      Grid.Row="5" 
                      Margin="{Binding Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter='Left, Top, Right', RelativeSource={RelativeSource Self}, Path=(params:General.BoldPaddingValue), Mode=OneWay}"/>

            <Label Grid.Row="6" 
                   Content="Dark Expanded"
                   HorizontalAlignment="Right"
                   Margin="{Binding Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter='Left, Top', RelativeSource={RelativeSource Self}, Path=(params:General.BoldPaddingValue), Mode=OneWay}"
                   Target="{Binding ElementName=DarkExpandedCheckBox}"/>
            <CheckBox x:Name="DarkExpandedCheckBox" 
                      Grid.Column="1"
                      Grid.Row="6" 
                      Margin="{Binding Converter={StaticResource DoubleToThicknessConverter}, ConverterParameter='Left, Top, Right', RelativeSource={RelativeSource Self}, Path=(params:General.BoldPaddingValue), Mode=OneWay}"/>

            <metro:ToggleCommandButton Header="Header"  
                                       Style="{StaticResource FlyoutUpToggleCommandButtonStyle}"/>

        </Grid>

        <Grid x:Name="ExpanderGrid">
            
            <Expander ContentTemplate="{StaticResource SettingsContentTemplate}" 
                      ExpandDirection="{Binding ElementName=ExpandDirectionComboBox, Path=SelectedItem}"
                      HeaderTemplate="{StaticResource SettingsHeaderTemplate}"
                      IsExpanded="{Binding ElementName=LightExpandedCheckBox, Path=IsChecked}"
                      Style="{StaticResource FlyoutExpanderStyle}"/>

            <Expander ContentTemplate="{StaticResource ContrastSettingsContentTemplate}" 
                      ExpandDirection="{Binding ElementName=ExpandDirectionComboBox, Path=SelectedItem}"
                      HeaderTemplate="{StaticResource ContrastSettingsHeaderTemplate}"
                      IsExpanded="{Binding ElementName=AccentExpandedCheckBox, Path=IsChecked}"
                      Style="{StaticResource AccentFlyoutExpanderStyle}"/>

            <Expander ContentTemplate="{StaticResource ContrastSettingsContentTemplate}" 
                      ExpandDirection="{Binding ElementName=ExpandDirectionComboBox, Path=SelectedItem}"
                      HeaderTemplate="{StaticResource ContrastSettingsHeaderTemplate}"
                      IsExpanded="{Binding ElementName=DarkExpandedCheckBox, Path=IsChecked}"
                      Style="{StaticResource DarkFlyoutExpanderStyle}"/>
            
        </Grid>

    </Grid>
</UserControl>
